<template>
  <div id="Monitor_project" class="shadow-box">
    <!-- 项目结构及信息 -->
    <div class="middle">
      <div class="tree">
        <!-- 项目树 -->
        <div class="slide">
          <div class="title">工程列表</div>
          <div class="container">
            <!-- 项目表格 -->
            <el-table :data="projectList" ref="projectList" @row-click="project_table_row_click" :highlight-current-row="true" style="width: 100%">
              <el-table-column prop="name" label="项目名称"> </el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <div class="flex_r_end" @click.stop>
                    <el-button
                      size="mini"
                      type="danger"
                      style="margin-left: 5px"
                      @click="
                        dialogs.delProject = true
                        del_projects = [scope.row.id]
                      "
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            &nbsp;
            <!-- 新建项目按钮 -->
            <el-button
              class="w100"
              @click="
                dialogs.add_or_setProject = true
                active = 0
              "
              >新建项目</el-button
            >
          </div>
        </div>
      </div>
      <div class="areainfo">
        <div class="slide">
          <div class="title">工程详情</div>
          <div class="container">
            <div class="h100" v-if="select_project">
              <section class="setProjectFormClass">
                <ProjectForm templateType="set" ref="setProjectForm" :fromData="select_project"></ProjectForm>
              </section>
              <div class="flex_r_end">
                <el-button style="margin-top: 50px" @click="setProject_">修改</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 弹框，展示 eharts -->
      <Surface :show="surface_show" @exit="surface_show = false"></Surface>
      <!-- 新建项目/修改项目对话框 -->
      <el-dialog title="新建项目" :visible.sync="dialogs.add_or_setProject" ref="add_or_setProject" width="50%" :before-close="add_dialog_exit_fun">
        <el-steps :active="active" finish-status="success" :align-center="true">
          <el-step title="配置项目属性"></el-step>
          <el-step title="选择负责人"></el-step>
        </el-steps>
        <div class="add_req_box">
          <div class="add_req_form">
            <section v-show="active == 0">
              <ProjectForm templateType="add" ref="addProjectForm" :fromData="add_req_data"></ProjectForm>
            </section>
            <section v-show="active == 1">
              <ClyTable :select="true" :select_change="select_change_fun"></ClyTable>
            </section>
          </div>
          <div class="flex_r_end">
            <el-button style="margin-top: 12px" @click="step_next">下一步</el-button>
          </div>
        </div>
      </el-dialog>

      <!-- 删除项目对话框 -->
      <el-dialog title="删除项目" :visible.sync="dialogs.delProject" width="50%">
        <div class="">请确认对该项目的删除</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogs.delProject = false">取 消</el-button>
          <el-button type="primary" @click="delProject_">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Surface from '../../components/Monitor/surface.vue'
import ClyTable from '../../components/Monitor/cly_table.vue'
import ProjectForm from '../../components/Monitor/forms/project.vue'
import { getProjectList, addProject, setProject, delProject } from '../../api/project/index2.js'
export default {
  name: 'Monitor_project',
  data() {
    return {
      active: 0,
      // eharts surface 弹框显示状态
      surface_show: false,
      // 项目列表
      projectList: [],
      // 当前选中的的项目
      select_project: null,
      select_project_rules: {},
      // 对话框们的显示状态
      dialogs: {
        // 新建项目和修改项目
        add_or_setProject: false,
        delProject: false,
      },
      dialog_type: 'add',
      // 添加工程
      add_req_data: {
        name: '',
        code: '',
        entrustingParty: '',
        supervisingUnit: '',
        tunnelName: '',
        surroundingRockClassification: '',
        instrumentModel: '',
        sectionMileage: '',
        embeddingDate: '',
        reservedDeformation: '',
        controlPoint: '',
        standard: '',
        surveyManagerIds: [],
      },
      // 添加工程字段规则
      add_req_data_relus: {
        name: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
      },
      // 删除工程数组
      del_projects: [],
    }
  },
  computed: {},
  components: {
    Surface,
    ClyTable,
    ProjectForm,
  },
  methods: {
    // 下一步
    step_next() {
      switch (this.active) {
        case 0:
          this.active++
          break
        case 1:
          this.addProject_()
          break
        default:
      }
    },
    // 添加项目对话框关闭事件
    add_dialog_exit_fun() {
      // 恢复数据为初始
      this.$refs.addProjectForm.resetFields()
      this.dialogs.add_or_setProject = false
    },
    // 表格子组件选中项发生改变时触发
    select_change_fun(val) {
      this.add_req_data.surveyManagerIds = val.map(item => {
        return item.id
      })
    },
    // 新建项目
    async addProject_() {
      let res = await addProject(this.add_req_data)
      if (res.result == 0) {
        this.$message.success('成功创建项目')
        this.add_dialog_exit_fun()
        this.$ebs.$emit('getProjectList_iHeader')
      } else {
      }
    },
    // 修改项目
    async setProject_() {
      let res = await setProject(this.select_project)
      console.log(res)
    },
    // 删除项目
    async delProject_() {
      this.dialogs.delProject = false
      let res = await delProject({ ids: this.del_projects })
      if (res.result == 0) {
        this.$message.success('成功删除项目')
        this.$ebs.$emit('getProjectList_iHeader')
      }
    },
    //   项目表格行单击选中
    project_table_row_click(row) {
      this.select_project = row
      console.log(this.select_project)
      // 通知 iHeader 做出改变
      this.$ebs.$emit('selectProject_change_iHeader', row.id)
      this.$store.commit('setProjectInfo', row)
    },
    //   以表的形式查看
    look_surface(row) {
      this.surface_show = true
    },
    // 项目选择发生改变时触发
    projectChange(projectId) {
      if (projectId) {
        this.queryProject_by_id(projectId)
      } else {
        this.$refs.projectList && this.$refs.projectList.setCurrentRow()
      }
    },
    // 找出指定ID选中项选择
    queryProject_by_id(projectId) {
      // 找出选中项
      let selectProject = null
      this.projectList.filter(item => {
        if (item.id == projectId) {
          selectProject = item
          return true
        }
      })
      if (!selectProject) return
      // 设置选中项
      this.$refs.projectList && this.$refs.projectList.setCurrentRow(selectProject)
      this.select_project = selectProject
    },
  },
  mounted() {
    this.projectList = this.$store.state.projectList
    // 收听 iHeader 项目列表的变化 projectList_change
    this.$ebs.$on('projectList_change', call => {
      this.projectList = this.$store.state.projectList
    })
    if (this.$store.state.projectInfo instanceof Object) {
      this.queryProject_by_id(this.$store.state.projectInfo.id)
    }
    // 收听 iHeader 项目列表的选中项变化 selectProject_change
    this.$ebs.$on('selectProject_change', projectId => {
      this.projectChange(projectId)
    })
  },
  destroyed() {
    this.$ebs.$off('projectList_change')
    this.$ebs.$off('selectProject_change')
  },
}
</script>

<style lang="scss" scoped>
#Monitor_project {
  width: 100%;
  height: 100%;

  .filter {
    width: 100%;
    height: 65px;
    overflow: hidden;
    overflow-x: auto;
  }

  .middle {
    width: 100%;
    // height: calc(100% - 65px);
    height: 100%;
    display: flex;
    justify-content: space-between;

    & > div {
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 0 10px 0 0;
    }

    .tree {
      width: 300px;
      height: 100%;

      .slide {
        height: 100%;
      }
    }

    .areainfo {
      flex: 1;
      height: 100%;

      .slide {
        &:last-child {
          height: 100%;
        }
      }
    }

    .slide {
      width: 100%;

      .title {
        height: 38px;
        display: flex;
        align-items: center;
        font-size: 24px;
        border-bottom: 2px solid #006886;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .container {
        width: 100%;
        height: calc(100% - 50px);
        box-sizing: border-box;
        position: relative;
        padding: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        .position_box {
          position: relative;
          .position_btn {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .setProjectFormClass {
          padding: 20px;
          padding-right: 30px;
          height: calc(100% - 150px);
          overflow-y: auto;
        }
      }
    }
  }
}
.add_req_box {
  .add_req_form {
    padding-right: 80px;
    height: 30vh;
    overflow-y: auto;
  }
  box-sizing: border-box;
  padding: 50px;
}
</style>
